<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>简历</title>
  </head>
  <body>
    <div id="c"></div>
    <script>
      let u1 = {
        //user的结构
        username: '保定梁朝伟', // 用户名
        userId: 19318, // 用户id
        theme: 'light', // 主题名
        favorite: '看书', // 爱好
        birthday: '1993-12-28', // 生日
        age: 28, // 年龄
        avatar:
          'https://tva1.sinaimg.cn/large/008i3skNgy1gq9wsodlenj30gc0ji14m.jpg', // 头像
        hometown: '河北省保定市', // 家乡
        // 工作经验
        jobs: [
          {
            company: '北京格致璞科技有限公司',
            from: '2018-09',
            to: '2019-06',
          },
          {
            company: '北京豆网科技有限公司',
            from: '2019-06',
            to: '2019-12',
          },
          {
            company: '值得买科技',
            from: '2019-12',
          },
        ],
        // 技能
        skills: [
          ['css3', '精通'],
          ['javascript', '熟练'],
          ['html', '精通'],
        ],
        // 自我介绍, 要求：
        //    < 要替换成 &lt;
        //    > 要替换成 &gt;
        // XSS
        //    \n要替换成<br/>
        // String.replace(/\n/g, '<br />')

        description: `• 性格<i>严谨</i>，一丝不苟。注重细节。具有大局观和一定的领导组织能力。
         • 对于前沿科技具有浓厚的兴趣，具有一定的创新能力。
         • 勤奋、努力，有志于长期从事相关工作`,
      }



      function encodeHTML(html) {
        let d = document.createElement('div')
        d.innerText = html
        return d.innerHTML
      }

  function getUserHTML(user){
    return `<table border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>姓名</td>
    <td>${user.username}</td>
  </tr>
  <tr>
    <td>照片</td>
    <td><img width="100" src="${user.avatar}" alt="">
    </td>
  </tr>

  <tr>
    <td>爱好</td>
    <td>${user.favorite}</td>
  </tr>
  <tr>
    <td>生日</td>
    <td>${user.birthday}</td>
  </tr>
  <tr>
    <td>年龄</td>
    <td>${user.age}</td>
  </tr>
  <tr>
    <td>家乡</td>
    <td>${user.hometown}</td>
  </tr>
  <tr>
    <td>工作经验</td>
    <td><ul>${user.jobs.map(function(job){
    return `<li>${job.company}:${job.to ? `${job.from}-${job.to}`:`${job.from}-至今`}</li>`
    }).join('')
  }
    </ul>
    </td>
  </tr>
  <tr>
    <td>技能</td>
    <td>
    <ul>${user.skills.map(function(item){
    //  ['css','精通']
    return `<li>${item[0]}:${item[1]}</li>`
    }).join('')}
    </ul>
    </td>
  </tr>
  <tr>
    <td>自我介绍</td>
    <td>
      <ul>${user.description
      .replace(/>/g,'&gt;')
      .replace(/</g,'&lt;')
      .replace(/\n/g,'<br/>')
     
      }
    </ul>
    </td>
  </tr>


</table>`
  }
  function render(){
    let html=getUserHTML(u1)
    document.getElementById('c').innerHTML=html
  }
  render()

    </script>


  </body>
</html>
